<template>
  <!--  搜索框-->
  <div class="tenant-container">
    <div class="search" v-show="isShowSearch">
      <span>考试名称 </span>
      <el-input v-model="examName" placeholder="请输入考试名称"/>
      <span>考试状态 </span>
      <el-select v-model="status" placeholder="请选择考试状态">
        <el-option v-for="item in examStatus" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button :icon="Search" class="el-button__primary" type="primary" @click="initExamList">查询</el-button>
      <el-button :icon="Refresh" class="el-button__default" @click="refreshData">重置</el-button>
    </div>
    <!--  操作按钮-->
    <div class="operation">
      <div class="float_left">
        <el-button :icon="Search" class="el-button__primary" type="primary" @click="handleInsertExamBase">新增</el-button>
        <el-button :icon="Refresh" class="el-button__plain" @click="initExamList">刷新缓存</el-button>
      </div>
      <div class="float_right">
        <el-tooltip :content="isShowSearch?'隐藏搜索':'显示搜索'" placement="top">
          <el-button :icon="Search" circle @click="showSearch()"/>
        </el-tooltip>
        <el-tooltip content="刷新" placement="top">
          <el-button :icon="Refresh" circle @click="initExamList"/>
        </el-tooltip>
      </div>
    </div>
    <!--  租户信息card-->
    <div class="tenant-info__card" >
      <el-row :gutter="30"
              v-loading="loading">
        <!--      循环tenantList创建el-card-->
        <el-col :lg="8" :md="12" :xs="24" v-for="item in examBaseList">
          <el-card :key="item.id" class="tenant-info__card__item">
            <!--            基本信息-->
            <div class="tenant-info__card__item_base">
              <div class="tenant-info__card__item_base__item">
                <span>考试名称：</span>
                <span>{{ item.examName }}</span>
              </div>
              <div class="tenant-info__card__item_base__item">
                <span><svg-icon style="font-size: 16px;" icon-class="num"/></span>&nbsp;&nbsp;&nbsp;
                <span>{{ item.examCode }}</span>
              </div>
            </div>
            <!--            其他信息-->
            <div class="bank-info__card__item__other">
              <div class="bank-info__card__item__other__item">
                <span>考试类型： </span>
                <span>{{examType[item.examType]? examType[item.examType].label:'未知' }}</span>
              </div>
              <div class="bank-info__card__item__other__item">
                <span>考试简介： </span>
                <span>{{ item.examDescription }}</span>
              </div>
              <div class="bank-info__card__item__other__item">
                <span>考试时间： </span>
                <span>{{ item.startTime?item.startTime:'1970-01-01 00:00:00' }} 至 {{item.endTime?item.endTime:'1970-01-01:00:00:00'}}</span>
              </div>
              <div class="bank-info__card__item__other__item">
                <span>考试状态： </span>
                <span  :style="examStatus[item.status].style">{{examStatus[item.status].label }}</span>
              </div>
              <!--              操作-->
              <div class="tenant-info__card__item__operator">
                <el-button link v-if="item.status === 0" type="primary" @click="handleUpdate(item.id)">
                  <template #default>
                    <el-icon><Edit /></el-icon>
                    修改考试信息
                  </template>
                  </el-button>
                <el-button link v-if="item.status>=0&& item.status<=2" type="primary" @click="chooseQuestion(item.id)">
                  <template #default>
                    <el-icon><DocumentChecked /></el-icon>
                    去选题
                  </template>
                </el-button>
                <el-button link v-if="item.status>=0&& item.status<=2" type="primary" @click="handleAddExamUser(item.id)">
                  <template #default>
                    <el-icon><CircleCheck /></el-icon>
                    考生选择
                  </template>
                </el-button>
                <el-button link v-if="item.status>=0&& item.status<=2" type="primary" @click="handleCreateExam(item.id)">
                  <template #default>
                    <el-icon><Open /></el-icon>
                    发布考试
                  </template>
                </el-button>
                <el-button link v-if="item.status>=4&&item.status==5" type="primary" @click="openExamCorrect(item.id)">
                  <template #default>
                    <el-icon><Connection /></el-icon>
                    阅卷信息维护
                  </template>
                </el-button>
                <el-button link v-if="item.status>=8" :disabled="item.status===8" type="primary">
                  <template #default>
                    <el-icon><Delete /></el-icon>
                    删除
                  </template>
                </el-button>
              </div>
            </div>

          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--  分页按钮-->
    <div class="pagination">
      <div class="pagination-block">
        <el-pagination
            v-model::current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[6,10,20,30,40,50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>
    <exam-insert  @refresh="refreshData"/>
    <add-exam-question @refresh="refreshData"/>
    <add-exam-user @refresh="refreshData"/>
    <add-exam-time @refresh="refreshData"/>
    <add-exam-correct-info @refresh="refreshData"/>
  </div>

</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {
  CircleCheck, Connection,
  Delete,
  DocumentChecked,
  Edit,
  List,
  Open,
  Refresh,
  Search,
  TurnOff
} from "@element-plus/icons-vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {tenantStore} from "@/stores/tenant/tenantStore.js";
import {getExamPage, publishExam} from "@/api/question/exam.ts";
import {examBaseStore} from "@/stores/question/examStore.ts";
import ExamInsert from "@/components/exam/examInsert.vue";
import AddExamQuestion from "@/components/exam/addExamQuestion.vue";
import AddExamUser from "@/components/exam/addExamUser.vue";
import AddExamCorrectInfo from "@/components/exam/addExamCorrectInfo.vue";
import AddExamTime from "@/components/exam/addExamTime.vue";

const isShowSearch = ref(true)
const examName = ref('')
const status=ref(null)
const examBaseList = ref([] as any[])
const currentPage = ref(1)
const pageSize = ref(6)
const total = ref(0)
const loading = ref(false)
const store = tenantStore()
const examStore=examBaseStore()
const examType=[
  {'value':0,'label':'普通考试','style':'color:#535bf2'},
  {'value':1,'label':'证书考试','style':'color:#67C23A'},
]
const examStatus = ref(
    [
      {'value':0,'label':'已创建','style':'color:#535bf2'},
      {'value':1,'label':'已选题','style':'color:#535bf2'},
      {'value':2,'label':'已选择考试人','style':'color:#535bf2'},
      {'value':3,'label':'待考试','style':'color:#08ba2c'},
      {'value':4,'label':'考试中','style':'color:#08ba2c'},
      {'value':5,'label':'考试结束','style':'color:#ccc'},
      {'value':6,'label':'待阅卷','style':'color:#fcc931'},
      {'value':7,'label':'阅卷中','style':'color:#fcc931'},
      {'value':8,'label':'已出分','style':'color:#ccc'},
      {'value':9,'label':'已取消','style':'color:#ccc'},
    ]
)
onMounted(() => {
  initExamList()
})
const showSearch = () => {
  isShowSearch.value = !isShowSearch.value
}
const initExamList = async () => {
  loading.value = true
  const res = await getExamPage({page: currentPage.value, pageSize: pageSize.value, examName: examName.value,status:status.value})
  examBaseList.value = res.data["records"]
  total.value = res.data["total"]
  currentPage.value = res.data['current']
  pageSize.value = res.data['size']
  loading.value = false
}

const openExamCorrect=(id)=>{
  examStore.setExamBaseId(id)
  examStore.setOpenAddCorrect(true)
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  initExamList()
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  initExamList()
}
const refreshData = () => {
  examName.value = ''
  status.value=null
  currentPage.value = 1
  pageSize.value = 6
  initExamList()
}

const handleCreateExam=async (id) => {
  examStore.setExamBaseId(id)
  examStore.setOpenAddTime(true)
}

const handleAddExamUser=(id)=>{
  examStore.setExamBaseId(id)
  examStore.setOpenAddUser(true)
}

const chooseQuestion=(id)=>{
  examStore.setAddExamQuestionId(id)
  examStore.setOpenAddQuestion(true)
}



const handleUpdate = (id: number) => {
  examStore.setExamBaseId(id)
  examStore.setExamInsertOpen(true)

}

const handleInsertExamBase=() => {
  examStore.setExamInsertOpen(true)
}
</script>
<style scoped>
.tenant-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;

  border: 1px solid var(--el-menu-border-color)
}

.operation {
  width: 100%;
  height: 10%;

  justify-content: space-between;
  text-align: center;
  align-items: center;
  display: flex;

  .float_left {
    align-items: center;
    display: flex;
  }

  .float_right {
    align-items: center;
    display: flex;
    margin-right: 20px;
  }
}

.tenant-info__card {
  min-height: 70%;
  display: flex;
  overflow: auto;
  margin: 0 60px;
  .el-row {
    width: 100%!important;
    height: 100%!important;
  }

  .tenant-info__card__item {
    border-radius: 10px;
    border: rgb(46, 92, 246) 1px solid;
    //background-color: rgb(243, 244, 246,0.2);
    box-shadow: 1px 1px 10px 1px rgb(46, 92, 246, 0.2);
    background: rgba(255, 255, 255, 0.7); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 模糊效果 */
  }
}

.pagination {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: right;

  .pagination-block {
    margin-right: 20px;
  }
}
.search {
  margin-bottom: 20px;
  span {
    line-height: 32px;
  }

  display: flex;
  font-size: 12px;

  .el-input,.el-select {
    width: 160px;
    height: 32px;
    font-size: 12px;
    margin: 0 8px;
  }

}

.tenant-info__card__item_base {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: bold;
  color: rgb(46, 92, 246);

  .tenant-info__card__item_base__item {
    display: flex;
    align-content: center;
  }
}

.bank-info__card__item__other {
  font-size: 12px;

  .bank-info__card__item__other__item {
    margin: 5px 0;
  }
}

.tenant-info__card__item__operator {
  font-size: 12px;
  display: flex;
  justify-content: right;

  .el-button {
    color: rgb(46, 92, 246);
    font-size: 12px;
  }
}
.el-col{
  margin-top: 20px;
  max-height: 220px;
}
</style>